import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/bootstrap-icons.svg'
import 'bootstrap/dist/js/bootstrap.min' // npm i popper.js
import './App.css';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from "./components/Navbar";
import CategoryPostsPage from "./pages/CategoryPostsPage";
import TagPostsPage from "./pages/TagPostsPage";
import HomePage from "./pages/HomePage";
import ArchivePostsPage from "./pages/ArchivePostsPage";
import NotFoundPage from "./pages/NotFoundPage";
import SearchResultsPage from "./pages/SearchResultsPage";
import PostDetailPage from "./pages/PostDetailPage";
import Sidenav from "./components/Sidenav";

function App() {
    return (
        <BrowserRouter>
            <Navbar/>
            <main className="container" style={{marginTop: "3rem", marginBottom: "4rem"}}>
                <div className="row g-5">

                    <Switch>
                        <Route exact path='/' component={HomePage}/>
                        <Route exact path='/search' component={SearchResultsPage}/>
                        <Route exact path='/archive/:year/:month' component={ArchivePostsPage}/>
                        <Route exact path='/post/:slug' component={PostDetailPage}/>
                        <Route exact path='/category/:categoryName' component={CategoryPostsPage}/>
                        <Route exact path='/tag/:tagName' component={TagPostsPage}/>
                        <Route exact path='*' component={NotFoundPage}/>
                    </Switch>

                    <Sidenav/>
                </div>
            </main>

        </BrowserRouter>
    );
}

export default App;
